<script setup lang="ts">
import { defineComponent, ref, watch } from 'vue'

const props = defineProps({
  // 标题
  title: {
    type: String,
    default: '',
  },
  // 是否显示
  visibleModel: {
    type: Boolean,
    default: false,
  },
  // z-index
  zIndex: {
    type: Number,
    default: 100,
  },
  // 自定义样式
  customStyle: {
    type: Object,
    default: () => ({}),
  },
  onClose: {
    type: Function,
    default: () => {},
  },
  // 显示位置
  position: {
    type: String,
    default: 'bottom',
  },
  // 底部高度
  footerHeight: {
    type: String,
    default: '8%',
  },
})

const emit = defineEmits(['update:visibleModel', 'close'])
const visiblePopup = ref(props.visibleModel)

watch(
  () => props.visibleModel,
  (val) => {
    visiblePopup.value = val
  },
)

function updateVisibleFunc(val: any) {
  emit('update:visibleModel', val)
}
function closeFunc() {
  emit('close', '')
}
</script>

<script lang="ts">
const componentName = 'popup-model'
export default defineComponent({
  name: componentName,
})
</script>

<template>
  <div>
    <nut-popup
      :visible="props.visibleModel"
      :position="position"
      :custom-style="customStyle"
      round
      :z-index="zIndex"
      safe-area-inset-bottom
      @update:visible="updateVisibleFunc"
      @close="closeFunc"
    >
      <div class="model-box">
        <div class="model-head" flex flex-col>
          <div flex justify-between items-center w-full>
            <div ml-60rpx />
            <span text-black text-lg>
              {{ title }}
            </span>
            <div mr-40rpx @click="updateVisibleFunc(false)">
              <nut-icon name="close" />
            </div>
          </div>
          <template v-if="$slots.headExtend">
            <slot name="headExtend" />
          </template>
        </div>
        <div class="model-main">
          <template v-if="$slots.body">
            <slot name="body" />
          </template>
        </div>
        <div class="model-footer" flex>
          <template v-if="$slots.footer">
            <slot name="footer" />
          </template>
        </div>
      </div>
    </nut-popup>
  </div>
</template>

<style lang="scss" scoped>
.model-box {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.model-head {
 margin-top: 20rpx;
 margin-bottom: 16rpx;
}

.model-footer {
  height: v-bind('props.footerHeight');
}

.model-main {
//撑满剩余部分
  flex: 1;
  overflow-x: hidden;
}
</style>
